<template>
  <div class="order">
    <div class="order-left">
      <div class="order-left-form">
        <el-form :model="form" label-width="6.25vw">
          <el-form-item label="工厂单号:">
            <el-input v-model="form.no" placeholder="请输入工厂单号"></el-input>
          </el-form-item>
          <el-form-item class="order-btn-item">
            <template #label>
              <div class="ordere-label-container">
                <div class="ordere-label">模具型号</div>
                :
              </div>
              <div class="ordr-label-btn">+新增</div>
            </template>
            <rb-tag-list :list="modelList" v-model="form.model"></rb-tag-list>
          </el-form-item>
          <el-form-item class="order-btn-item">
            <template #label>
              <div class="ordere-label-container">
                <div class="ordere-label">颜色</div>
                :
              </div>
              <div class="ordr-label-btn">+新增</div>
            </template>
            <rb-tag-list :list="colorList" v-model="form.color"></rb-tag-list>
          </el-form-item>
          <el-form-item style="margin-bottom: 0.8333vw">
            <template #label>
              <div class="ordere-label-container">
                <div class="ordere-label">尺码</div>
                :
              </div></template
            >
            <div class="rb-size-type-list">
              <rb-tag-list
                :list="sizeTypeList"
                v-model="sizeType"
              ></rb-tag-list>
            </div>
            <div class="rb-size-type-container">
              <rb-size-select
                :list="sizeList"
                v-model="form.size"
                @onSelect="handleSelect"
              ></rb-size-select>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div class="order-btn-group">
        <rb-button>增加一组</rb-button>
        <rb-button style="flex: 1">保存</rb-button>
      </div>
    </div>
    <div class="order-right">
      <div class="order-right-top">
        <div class="order-total">订单总数量：<strong>7620</strong></div>
        <div class="order-notes">
          <div class="order-notes-label">备注：</div>
          <el-input v-model="form.notes" placeholder="选填"></el-input>
        </div>
        <a class="order-history-btn">历史指令单</a>
      </div>
      <div class="order-right-bottom">
        <el-table
          :data="tableData"
          border
          :header-cell-style="{ color: '#050505', 'text-align': 'center' }"
          :cell-style="{ 'text-align': 'center', color: '#070707' }"
          style="width: 100%"
        >
          <el-table-column
            v-for="(column, index) in columns"
            :key="column.prop"
            v-bind="column"
          />
          <el-table-column fixed="right" width="80">
            <template #default="{ row }">
              <el-button
                link
                type="danger"
                size="small"
                @click="handleDelete(row)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="order-submit-container">
          <rb-button style="width: 27.9167vw">确认生产指令单</rb-button>
        </div>
      </div>
    </div>
    <OrderSizeDialog ref="orderSizeDialog" @ok="handleSizeOk"></OrderSizeDialog>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import OrderSizeDialog from "./components/OrderSizeDialog.vue";
const form = reactive({});
const modelList = ref([
  {
    label: "RB-386",
    value: "1",
  },
  {
    label: "RB-386",
    value: "2",
  },
  {
    label: "RB-386",
    value: "3",
  },
  {
    label: "RB-386",
    value: "4",
  },
  {
    label: "RB-386",
    value: "5",
  },
  {
    label: "RB-386",
    value: "6",
  },
  {
    label: "RB-386",
    value: "7",
  },
  {
    label: "RB-386",
    value: "8",
  },
]);

const colorList = ref([
  {
    label: "黄色",
    value: "yellow",
  },
  {
    label: "紫色",
    value: "purple",
  },
  {
    label: "绿色",
    value: "green",
  },
  {
    label: "蓝色",
    value: "blue",
  },
  {
    label: "红色",
    value: "red",
  },
]);
const sizeType = ref("24-29");
const sizeTypeList = ref([
  {
    label: "24-29",
    value: "24-29",
  },
  {
    label: "24/25-48/49",
    value: "24/25-48/49",
  },
  {
    label: "1-15",
    value: "1-15",
  },
  {
    label: "130-180",
    value: "130-180",
  },
  {
    label: "XS-XXL",
    value: "XS-XXL",
  },
]);
const sizeList = ref([
  {
    label: "24",
    value: "24",
  },
  {
    label: "25",
    value: "25",
  },
  {
    label: "26",
    value: "26",
  },
  {
    label: "27",
    value: "27",
  },
  {
    label: "28",
    value: "28",
  },
  {
    label: "29",
    value: "29",
  },
  {
    label: "30",
    value: "30",
  },
  {
    label: "31",
    value: "31",
  },
  {
    label: "32",
    value: "32",
  },
  {
    label: "33",
    value: "33",
  },
  {
    label: "34",
    value: "34",
  },
  {
    label: "35",
    value: "35",
  },
  {
    label: "36",
    value: "36",
  },
  {
    label: "37",
    value: "37",
  },
  {
    label: "38",
    value: "38",
  },
  {
    label: "39",
    value: "39",
  },
  {
    label: "40",
    value: "40",
  },
  {
    label: "41",
    value: "41",
  },
  {
    label: "42",
    value: "42",
  },
  {
    label: "43",
    value: "43",
  },
  {
    label: "44",
    value: "44",
  },
  {
    label: "45",
    value: "45",
  },
  {
    label: "46",
    value: "46",
  },
  {
    label: "47",
    value: "47",
  },
  {
    label: "48",
    value: "48",
  },
  {
    label: "49",
    value: "49",
  },
  {
    label: "50",
    value: "50",
  },
]);
const tableData = ref([
  {
    model: "RB-386",
    no: "23-1210",
    color: "深蓝",
    28: 279,
  },
  {
    model: "RB-386",
    no: "23-1210",
    color: "深蓝",
    28: 279,
  },
]);
const columns = ref([
  {
    label: "工厂单号",
    prop: "no",
    width: "140px",
  },
  {
    label: "模具型号",
    prop: "model",
    width: "140px",
  },
  {
    label: "颜色",
    prop: "color",
  },
  {
    label: "28",
    prop: "28",
  },
  {
    label: "29",
    prop: "29",
  },
  {
    label: "30",
    prop: "30",
  },
  {
    label: "31",
    prop: "31",
  },
  {
    label: "32",
    prop: "32",
  },
  {
    label: "33",
    prop: "33",
  },
  {
    label: "尺寸7",
    prop: "尺寸7",
  },
  {
    label: "尺寸8",
    prop: "尺寸8",
  },
  {
    label: "尺寸9",
    prop: "尺寸9",
  },
  {
    label: "尺寸0",
    prop: "尺寸0",
  },
  {
    label: "合计",
    prop: "total",
  },
]);
const handleDelete = (e) => {
  console.log(e);
};
const orderSizeDialog = ref();
const handleSelect = ({ current, value }) => {
  const index = form.size?.indexOf(current);
  if (index === undefined || index > -1) {
    if (form.size) {
      form.size?.splice(index, 1);
    } else {
      form.size = [];
    }
    orderSizeDialog.value.open(current);
  }
};
const handleSizeOk = (value) => {
  form.size.push(value.size);
};
</script>

<style lang='scss' >
.order {
  display: flex;
  padding: 20px;
  .order-left {
    width: 706px;
    height: 894px;
    box-shadow: var(--btn-shadow);
    background-image: var(--bg-gradient-color);
    border-radius: 20px;
    .order-left-form {
      padding: 24px 24px 0 24px;
    }
    .order-btn-group {
      margin-top: 26px;
      display: flex;
      gap: 18px;
      padding: 0 24px 0 10px;
    }
  }
  .order-right {
    width: 1168px;
    padding: 36px 10px 0 40px;
    .order-right-top {
      display: flex;
      align-items: center;
      gap: 40px;
      .order-total {
        flex: 1;
      }
      .order-notes {
        width: 650px;
        display: flex;
        align-items: center;
        .order-notes-label {
          white-space: nowrap;
          margin-right: 18px;
        }
      }
      .order-history-btn {
        color: var(--primary-color);
        text-decoration: underline;
        cursor: pointer;
      }
    }
    .order-right-bottom {
      margin-top: 40px;
    }
    .order-submit-container {
      display: flex;
      justify-content: center;
      margin-top: 50px;
    }
  }
  .order-btn-item {
    min-height: 110px;
    align-items: flex-start;
  }
  .ordere-label-container {
    display: flex;
    gap: 4px;
    text-align: center;
    text-align-last: center;
  }
  .ordere-label {
    flex: 1;
    text-align: justify;
    text-align-last: justify;
  }
  .ordr-label-btn {
    text-align: center;
    text-align-last: center;
    margin-top: 20px;
    color: var(--primary-color);
  }
  .rb-size-type-container {
    width: 100%;
    height: 356px;
    overflow-y: auto;
    /* 修改垂直滚动条 */
  }
  .rb-size-type-container::-webkit-scrollbar {
    width: 4px; /* 修改宽度 */
  }
  .rb-size-type-container::-webkit-scrollbar-track {
    background-color: #f1f1f1;
  }
  /* 修改滚动条滑块颜色 */
  .rb-size-type-container::-webkit-scrollbar-thumb {
    background-color: #888;
  }
  .rb-size-type-list {
    margin-bottom: 16px;
    padding: 6px;
    background: #fff;
    border-radius: 10000px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
    .rb-tag-list {
      gap: 0px;
    }
    .rb-tag {
      width: auto;
      height: auto;
      padding: 8px 21px;
      font-size: 18px;
      line-height: 1;
      box-shadow: none;
    }
    .rb-tag-active {
      color: inherit;
      background: #edeefb;
      border-radius: 100000px;
    }
  }

  // el样式修改

  .el-table--fit {
    box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    overflow: hidden;
  }
  .el-table .cell {
    padding: 0 4px;
  }
  .el-form-item__label {
    display: inline-block;
  }
}
</style>